<template>
	<view>
		<view class="block">
			<view class="item">
				<view class="item_l">是否含税</view>
				<view class="item_r1" @click="openpop">
					<span style="color: black">{{ params.includeTax }}</span>
					<uni-icons type="right" color="#3658FF"></uni-icons>
				</view>
			</view>
			<view class="item">
				<view class="item_l">合同金额</view>
				<view class="item_r">
					<input v-model="params.contractAmount" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">签订日期</view>
				<view class="item_r1">
					<uni-datetime-picker type="date" v-model="params.signDate" @change="changeLog">
						<view class="" style="display: flex; align-items: center">
							<span style="color: black">{{ params.signDate ? params.signDate : '请选择' }}</span>
							<image class="logo" src="/static/t1.png"></image>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
			<view class="item">
				<view class="item_l">签订地点</view>
				<view class="item_r">
					<input maxlength="25" v-model="params.signAddress" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">开户行</view>
				<view class="item_r">
					<input v-model="params.bankName" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">账号</view>
				<view class="item_r">
					<input v-model="params.bankAccount" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">税号</view>
				<view class="item_r">
					<input v-model="params.taxNumber" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item" style="border: none">
				<view class="item_l">合同备注</view>
			</view>
			<view class="textarea">
				<textarea maxlength="55" v-model="params.remark2" auto-height placeholder="请输入" placeholder-class="inputs"></textarea>
			</view>
		</view>
		<view class="footerbtn" @click="handleSave">
			<view class="cont">
				<view class="btn">
					{{ btntext }}
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup_jh">
				<view class="title">是否含税</view>
				<uni-icons @click="closepop" class="icon" color="#D1D1D6" type="closeempty" size="27"></uni-icons>
				<scroll-view scroll-y="true" class="scroll">
					<view class="its" :class="item.value == params.includeTax ? 'itsact' : ''" v-for="(item, index) in radiolist" :key="index" @click="changepop(item)">
						{{ item.value }}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { contractAdd, orderInfo, contractInfo, contractEdit, customer } from '@/common/http.api.js';
export default {
	data() {
		return {
			params: {
				orderId: '',
				bankName: '',
				bankAccount: '',
				taxNumber: '',
				includeTax: '是',
				contractAmount: '',
				signDate: '',
				signAddress: '',
				remark2: ''
			},
			radiolist: [
				{
					value: '是'
				},
				{
					value: '否'
				}
			],
			isvalue: '是',
			info: {},
			istype: 0,
			btntext: '确认创建'
		};
	},
	onLoad(option) {
		this.istype = option.istype;
		if (option.istype == 0) {
			customer({ id: option.id }).then((res) => {
				this.params.bankName = res.data.bankName;
				this.params.bankAccount = res.data.bankAccount;
				this.params.taxNumber = res.data.taxNumber;
			});
			this.btntext = '确认创建';
			orderInfo({
				id: option.id
			}).then((res) => {
				this.info = res.data;
				this.params.contractAmount = res.data.amountInclusive;

				this.params.orderId = option.id;
			});

			const today = new Date();
			const year = today.getFullYear();
			// 月份和日期需要补零（确保两位数）
			const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需 +1
			const day = String(today.getDate()).padStart(2, '0');
			this.params.signDate = `${year}-${month}-${day}`;
		} else {
			uni.setNavigationBarTitle({
				title: '修改合同'
			});
			this.btntext = '保存';
			contractInfo({
				id: option.id
			}).then((res) => {
				this.params.id = option.id;
				this.params.orderId = res.data.orderId;
				this.params.bankName = res.data.bankName;
				this.params.bankAccount = res.data.bankAccount;
				this.params.taxNumber = res.data.taxNumber;
				this.params.includeTax = res.data.includeTax;
				this.params.contractAmount = res.data.contractAmount;
				this.params.signDate = res.data.signDate;
				this.params.signAddress = res.data.signAddress;
				this.params.remark2 = res.data.remark2;
			});
		}
	},
	methods: {
		changeLog(e) {
			console.log(e);
		},
		changepop(item) {
			console.log(item.value);
			this.params.includeTax = item.value;
			if (item.value == '是') {
				this.params.contractAmount = this.info.amountInclusive;
			} else {
				this.params.contractAmount = this.info.amountExclusive;
			}
			this.$refs.popup.close();
		},
		closepop() {
			this.$refs.popup.close();
		},
		openpop() {
			this.$refs.popup.open();
		},
		handleSave() {
			if (this.params.contractAmount == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入金额'
				});
				return;
			}
			if (this.istype == 0) {
				contractAdd(this.params).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '已创建合同'
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							});
						}, 500);
					}
				});
			} else {
				contractEdit(this.params).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '合同已修改'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}

.block {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 1rpx 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	.textarea {
		width: 650rpx;
		min-height: 160rpx;
		background: #f7f8fa;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		textarea {
			padding: 22rpx 30rpx;
			font-size: 28rpx;
		}
	}
	.item {
		margin-top: 40rpx;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #dadada;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item_l {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;

			span {
				color: #fd2b1c;
				font-size: 24rpx;
			}
		}

		.item_r1 {
			margin-left: 20rpx;
			position: relative;
			text-align: right;
			font-size: 28rpx;
			color: #9d9d9d;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.item_r {
			flex: 1;
			margin-left: 20rpx;
			position: relative;
			text-align: right;
			font-size: 28rpx;

			input {
				font-size: 28rpx;
				text-align: right;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.dingbox {
				position: absolute;
				right: 0rpx;
				width: 280rpx;
				height: 300rpx;
				top: 70rpx;
				background-color: #ffffff;
				border: 1px solid #dadada;
				z-index: 666;
				border-radius: 0rpx 0rpx 20rpx 20rpx;

				.dingtxt {
					font-size: 28rpx;
					color: #000;
					text-align: center;
					line-height: 70rpx;
					border-bottom: 1px dashed #dadada;
					padding: 0rpx 10rpx;
					box-sizing: border-box;
					white-space: nowrap;
					overflow: hidden;
					// text-overflow:ellipsis;
				}

				.dingtxt:last-child {
					border: none;
				}
			}
		}
	}

	.item:last-child {
		padding-bottom: 0rpx;
		border: none;
	}
}

.popup_jh {
	width: 750rpx;
	height: 620rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding: 48rpx 54rpx;
	box-sizing: border-box;
	position: relative;

	.icon {
		right: 54rpx;
		top: 48rpx;
		position: absolute;
	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		text-align: center;
	}

	.scroll {
		margin-top: 50rpx;
		height: 400rpx;

		.its {
			width: 600rpx;
			height: 100rpx;
			background: #f7f8fa;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx auto;
			text-align: center;
			line-height: 100rpx;
			color: #333333;
		}

		.itsact {
			background: #3658ff;
			color: #ffffff;
		}
	}
}

.footerbtn {
	width: 750rpx;
	height: 120rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 2;

	.cont {
		display: flex;
		padding: 10rpx 20rpx;
		height: 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		align-items: center;
		justify-content: center;

		.btn {
			width: 400rpx;
			height: 80rpx;
			background: #3658ff;
			border-radius: 40rpx;
			color: #ffffff;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.absbtn {
			background: #808080;
		}
	}
}
</style>
